<template>
	<view class="page">
		<!-- 头部 -->
		<!-- #ifdef MP-WEIXIN -->
			<topVue>
				<view class="slotVue flex align-center padding-row30">
					<text class="fw600 fs34">消息</text>
				</view>
			</topVue>
		<!-- #endif -->
		
		
		<!-- tab切换 -->
		<view class="tabVue padding-row30">
			<u-tabs 
				:list="tabs" 
				:current="current" 
				@change="change"
				inactive-color="#666"
				active-color="#333"
				:isBold="true"
				:bar-style="barStyle"
				:is-scroll="false"
				item-width="170"
			></u-tabs>
		</view>
		
		<!-- body -->
		<view class="contentVue">
			<swiper class="swiper" :indicator-dots="false" :autoplay="false" :current="current" @change="swiperChange">
				<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
					<scroll-view scroll-y="true" class="scrollVue">
						<chatItem v-for="(o, i) in 10" :key="i"></chatItem>
						<u-gap height="20"></u-gap>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import chatItem from './components/chatItem.vue'
	export default {
		components: {
			chatItem
		},
		data(){
			return {
				tabs: [{name: '全部'}, {name: '特别关注'}, {name: '感兴趣'}, {name: '不匹配'}],
				current: 0,
				barStyle: {
					"width": "46rpx",
					"height": "12rpx",
					"background": "linear-gradient( 270deg, rgba(255,255,255,0) 0%, #FA4141 100%)",
					"border-radius": "6rpx",
					"bottom": "10rpx",
				},
				swiperCurrent: 0,
			}
		},
		onLoad() {
			uni.hideShareMenu({
				success() {
					console.log("kkkk")
				}
			})
		},
		methods: {
			change(e){
				this.current = e
			},
			swiperChange(e){
				this.current = e.target.current
			},
			go(){
				console.log("jjj")
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		.slotVue {
			width: 100%;
			height: 100%;
		}
		.tabVue {
			width: 100%;
			height: 80rpx;
		}
		.contentVue {
			flex: 1;
			width: 100%;
			.swiper {
				width: 100%;
				height: 100%;
				.swiper-item {
					width: 100%;
					height: 100%;
					.scrollVue {
						width: 100%;
						height: 100%;
						box-sizing: border-box;
					}
				}
			}
		}
	}
	
</style>
